<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		 .container{
		 	width:600px;
		 	margin:20px auto;
		 	border:1px black solid;
		 }
		 .container>nav{
		 	height:50px;
		 	display:flex;
		 }
		 a{
		 	display:block;
		 	flex:1;
		 	text-align:center;
		 	line-height:50px;
		 	text-decoration:none;
		 	color:#333;
		 	border:1px black solid;
		 	border-radius:10px;
		 }
		 .content>div{
		 	height:350px;
		 	text-align:center;
		 	line-height:350px;
		 	font-size:30px;
		 	display:none;


		 }
		.content>.show{
			display: block;
		}
		.active{
			background: #ccc;
			color:#fff;
		}
	</style>
</head>
<body>
	 <h1 align="center">tab选项卡</h1>
	 <div class="container">
          <nav>
          	   <a href="#" class="active">体育</a>
          	   <a href="#">游戏</a>
          	   <a href="#">娱乐</a>
          	   <a href="#">商品</a>
          </nav>
          <div class="content">
          	   <div class="show"><img src="./01.jpg" height="350"width="600"></div>
          	   <div class=""><img src="./02.jpg" height="350"width="600"></div>
          	   <div class=""><img src="./03.jpg" height="350"width="600"></div>
          	   <div class=""><img src="./04.jpg" height="350"width="600"></div>
          </div>	
	 </div>
</body>
<script>
	   var btns=document.getElementsByTagName('a');
	   var content=document.getElementsByClassName('content')[0];
	   var box=content.getElementsByTagName('div');
	   for(i=0;i<btns.length;i++){
           btns[i].title = i;
           btns[i].onclick=function(){
           	    for(var j=0;j<btns.length;j++){
				btns[j].className = '';
				box[j].className = '';
			}
			this.className = 'active';
			box[this.title].className = 'show';
           }
	   }
</script>
</html>